<template>
	<!-- 信息 -->
	<view class="container">
		<view class="u-page">
			<!-- 导航图标 -->
			<view>
				<image src="../../static/informationImg/微信图片_20230329160526.png" mode=""></image>
				<image src="../../static/informationImg/微信图片_20230329160522.png" mode=""></image>
				<image src="../../static/informationImg/微信图片_20230329160454.png" mode=""></image>
			</view>
			<view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
					<view class="newsArr" v-for="(item,index) in newsArr" :key="index" @click="toUpnew(item)">
						
						<view>
							<image :src="item.news_img"></image>
						</view>
						<view>
							<view>
								<text>{{item.news_name}}</text>
								<text>12:00</text>
							</view>
							<view>{{item.news_content}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar v-model="current" :list="list" :mid-button="true" inactive-color="rgb(23,150,230)"
			active-color="#4CB2B6 "></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '主页',
						count: 0,
						isDot: true,
						customIcon: false,
						pagePath: '/pages/navigation/home'
					},
					{
						iconPath: "photo",
						selectedIconPath: "photo-fill",
						text: '消息',
						customIcon: false,
						pagePath: '/pages/navigation/information'
					},
					{
						iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
						selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
						text: '社区',
						midButton: true,
						customIcon: false,
						pagePath: '/pages/navigation/seek'
					},
					{
						iconPath: "play-right",
						selectedIconPath: "play-right-fill",
						text: '课程',
						customIcon: false,
						pagePath: '/pages/navigation/curriculum'
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						count: 0,
						isDot: false,
						customIcon: false,
						pagePath: '/pages/navigation/my'
					},
				],
				current: 1,
				// 回复消息
				newsArr: [{
					news_img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Faab747d6-a32e-4c12-a758-f1c5bbd2aebb%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1682584263&t=0be30a770a2cce7dc9cb087bd01d0dc9",
					news_name: "张三",
					news_content: "吃了吗ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss"
				}, {
					news_img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F0b57ced3-437e-463a-82d2-2292d44f33fb%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1682584263&t=5c7a6c0e4659637b70c78e3a766bc124",
					news_name: "李四",
					news_content: "拉了吗"
				}, {
					news_img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F9af2e196-8c7a-4733-b6b8-ceee1d39f12b%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1682584263&t=03627086490fb50399c9b8876b9727d9",
					news_name: "王五",
					news_content: "死了吗"
				}],
			}
		},
		onLoad() {

		},
		methods: {
          // 点击列表发送信息
		  toUpnew(e){
			  uni.navigateTo({
			  	url: '/pages/Child_Component/sendPage?post='+encodeURIComponent(JSON.stringify(e)),
			  });
		  },
		}
	}
</script>
<style>
	page {
		height: 100%;
		/* border: 1px solid gold; */
	}
</style>

<style scoped>
	.newsArr>view:nth-of-type(2)>view:nth-of-type(2){
		 /* border: 1px solid hotpink; */
        overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.newsArr>view:nth-of-type(2)>view:nth-of-type(1)>text:nth-of-type(1){
		font-weight: bolder;
		font-size: 30rpx;
	}
	.newsArr>view:nth-of-type(2)>view:nth-of-type(1){
		/* border: 1px solid black; */
		display: flex;
		justify-content: space-between;
		height: 70rpx;
	}
	.newsArr>view:nth-of-type(2){
		border-bottom: 1px solid gainsboro;
		width: 530rpx;
		margin-right: 50rpx;
		padding-bottom: 10rpx;
		margin-left: 20rpx;
	}
	.newsArr>view:nth-of-type(1)>image{
		height: 130rpx;
		width: 130rpx;
		border-radius: 20%;
		margin-left: 20rpx;
	}
	.newsArr {
		display: flex;
		justify-content: space-between;
		height: 160rpx;
		align-items: center;
	}

	.scroll-Y {
		height: 98%;
	}

	.u-page>view:nth-of-type(2) {
		height: 75%;
	}
.u-page>view:nth-of-type(1)>image{
	height: 170rpx;
	width: 170rpx;
	
}
	.u-page>view:nth-of-type(1) {
		height: 200rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.u-page {
		height: 100%;
	}

	.container {
		height: 100%;
	}
</style>
